【Vue 學習筆記】Vue-Router

什麼是 Vue-Router？

路由（Vue-Router）根據 URL 不同的路徑來顯示的網頁內容。且透過監視 URL 的變化，導航到相對應的網址。

Vue-Router的開發流程

• 步驟一：引入 Vue-Router 開發環境

main.js 檔案

 import router from "./router"

 app.use(router)

路由表(index.js)

 import { createRouter, createWebHashHistory } from 'vue-router'

 const router = createRouter({
     history: createWebHashHistory(import.meta.env.BASE_URL),
     routes: [] //放入路由
 })

• 步驟二：定義元件頁面

HomeView.vue

 <template>
     <div>Home頁面</div>
 </template>

NewsView.vue

 <template>
     <div>News頁面</div>
 </template>

• 步驟三：建立路由表

index.js 檔案

import { createRouter, createWebHashHistory } from 'vue-router'

 const router = createRouter({
     history: createWebHashHistory(import.meta.env.BASE_URL),
     routes: [{
         path: '/home',
         component: () => import('../views/HomeView.vue'),
     },
     {
         path: '/news',
         component: () => import('../views/NewsView.vue'),
     }] //放入路由
 })

• 步驟四：加入對應連結

App.vue 檔案

<router-link to="/home">Home</router-link>
<router-link to="/news">News</router-link>
<router-view></router-view>